 
    <template>
  <div id="app">
     <!-- 模糊查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.user_name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" >查询</el-button>
        </el-form-item>
    </el-form>
     <!-- 列表 -->
     <el-table
     border
     :data="tableData"
      width="180">
      <el-table-column   
        prop="id"
        label="用户ID" 
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="user_name"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="bz"
        label="用户等级"
        width="180">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      tableData: [],
      currentPage4:1,
      pageSizes:[1, 2, 3, 4],
      pageSize:4,
      total:400,
      formInline: {
          user_name: '',
        }
    }
  },
  methods:{
 upTr(index) { // 上移
      if (index === 0) {
        return
      }
        swapItems(this.myAppList, index, index - 1);
  },
  downTr(index) { // 下移
        if (index === this.myAppList.length - 1) {
        return
      }
     swapItems(this.myAppList, index, index + 1);
    },
       // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getUserList();
      },
       handleChange(value) {
      console.log(value);
    },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = val;
        this.getUserList();
      }
      ,
      //列表
        getUserList(){
          var $this = this;
           this.axios({
            method:'get',
            url:"http://localhost:8084/ecUser/getUserList",
            params:{pageNo:this.currentPage4,pageSize:this.pageSize}
          }).then(function(res){
           console.log(res)
            $this.tableData=res.data.obj.list;
            $this.total=res.data.obj.total;
          })
        },
        //模糊查询
        onSubmit() {
        console.log('submit!');
         var $this = this;
            this.axios({
              method:'get',
              url: "http://localhost:8084/ecUser/getUserList",
              params:this.formInline
            }).then(function(res){
                console.log(res);
                $this.tableData = res.data.obj.list;
                $this.total = res.data.obj.total;
            });
       },
    },
      mounted(){
        this.getUserList();
      }
}
</script> 
